<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <link href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.theme.css" rel="stylesheet">

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
                loadMeetingType();
                loadMeetingGrabList("-1");
        })
        function loadMeetingGrabList(tid) {
            $.mobile.loading( "show", {
                text: "加载中",
                textVisible: true,
                textonly: true,
            });
            var uid=$("#uid").val();
            $.ajax({
                type:"get",
                url:"[[@{/MeetingGrabController/list}]]",
                data:{"uid":uid,"tid":tid},
                success:function (obj) {
                    var appendHtml="";
                     if(obj.code=="2000") {
                         $("#grabNum").empty();
                         $("#grabDiv").empty();
                         var objData = obj.data;
                         for (var i = 0; i < objData.length; i++) {
                             appendHtml += "<div style='width: 100%;background-color: white;margin-top: -3px;padding:10px 10px 10px 15px;display: inline-block;'>" +
                                 "<div style='width: 70%;float: left;' onclick='showMeetingInfo(\"" + 1 + "\");'>" +
                                 "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;font-size:18px;'>" +
                                 objData[i].title + "</div>" +
                                 "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;color: #777777;font-size:16px;padding-top:1px'>" +
                                 objData[i].meetingType.name + " / " + objData[i].ptime + "</div></div>" +
                                 "<div style='width: 30%;float: right;'>" +
                                 "<button class='able-btn' onclick='meetingGrabAddToPage(\""+objData[i].id+"\")'>可抢单</button></div></div>";
                         }
                         $("#grabDiv").append(appendHtml);
                     }else if(obj.code="2003"){
                         $("#grabNum").append(0);
                         $("#grabDiv").append("您暂无抢单列表");
                     }
                }


            })
            $.mobile.loading( "hide" );
        }
        //抢单页面信息编写
        function meetingGrabAddToPage(pid) {
            var uid=$("#uid").val();
            alert(pid);
            window.location.href="/MeetingGrabController/meetingGrabAddToPage?uid="+uid+"&pid="+pid;
           //  $.ajax({
           //      type: "get",
           //      url: "[[@{/MeetingGrabController/meetingGrabAddToPage}]]",
           //      data:{"uid":uid,"pid":pid},
           //
           //  });
        }

        function loadMeetingType(){
            $.ajax({
                type:"get",
                url:"[[@{/meetingtype/list}]]",

                success:function (msg) {
                    var code=msg.code;
                    if(code=="2003"){
                        var appendHTML="<option value='-1'>可抢单</option>"
                        $("#tid").append(appendHTML);

                    }else if(code="2000"){
                        var data=msg.data;
                        var appendHtml="";
                        for(var i=0;i<data.length;i++){
                            appendHTML+='<option value='+data[i].id+'>'+data[i].name+'</option>';
                        }
                        $("#tid").append(appendHTML);
                    }
                }

            });
        }
        function showPubDiv() {
            $("#two_line").css("border-top", "5px solid #4E90C7");
            //$("#two_tab").css("color","#777777");
            $("#one_line").css("border-top", "5px solid white");
            //$("#one_tab").css("color","white");
            $("#two").css("display", "none");
            $("#one").css("display", "block");
        }

        function showMyMeetings() {

            $("#two_line").css("border-top", "5px solid white");
            $("#one_line").css("border-top", "5px solid #4E90C7");

            $("#one").css("display", "none");
            $("#two").css("display", "block");

            $("#two").empty();
            var mname="学习SpringBoot";
            var remark="备注";
            var dateCurr="时间";
            var uid=$("#uid").val();
                 $.ajax({
                     type:"post",
                     url:"[[@{/MeetingGrabController/meetingGrabList}]]",
                     data:{"uid":uid},
                     success:function (obj) {
                         var appendHtml="";
                         var objData=obj.data;
                         if(obj.code=="2003"){
                           alert("您没有抢单列表1111")
                         }else if(obj.code=="2000"){
                             var appendHtml = "<font style='padding: 10px 10px 10px 15px;display: block;color: #777777;'>您共抢了"+objData.length+"单</font>";
                             for(var i=0;i<objData.length;i++){
                                 appendHtml += "<div style='width: 100%;background-color: white;margin-top: -3px;padding:10px 10px 10px 15px;display: inline-block;'>" +
                                     "<div style='width: 70%;float: left;' onclick='showMeetingInfo(\"" + 1 + "\");'>" +
                                     "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;font-size:18px;'>" +
                                     objData[i].meetingType.name+ "</div>" +
                                     "<div style='white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display: block;color: #777777;font-size:16px;padding-top:1px'>" +
                                     objData[i].remark + " / " +objData[i].createdate + "</div></div>" +
                                     "<div style='width: 30%;float: right;'>" +
                                     "</div></div>";
                             }
                             $("#two").append(appendHtml);
                         }

                     }

                 });
        }
    </script>
</head>

<body>
<div data-role="page" id="pageDetail">

    <input type="text" id="uid" th:value="${uid}">
<!--    <input type="hidden" id="tid" th:value="${tid}">-->
    <div style="padding:0px;background-color: #4E90C7;width: 100%;height:40px;line-height:40px;font-size:18px;text-align: center;cursor: pointer;" data-role="none">
        <div style="width: 50%;float: left;color: white;" onclick="showPubDiv();" id="one_tab">
            抢单
            <div style="border-right: 1px solid white;float: right;margin-top: 10px;height: 20px;"></div>
        </div>
        <div style="width: 50%;float: left;color: white;" onclick="showMyMeetings();" id="two_tab">我的抢单</div>
        <div style="border-top:5px solid white;width: 50%;float: left;" id="one_line"></div>
        <div style="border-top:5px solid #4E90C7;width: 50%;float: left;" id="two_line"></div>
    </div>
    <div id="one" class="ui-body-d ui-content" style="padding:0;display: block;width: 100%;">
        <div style="padding:0 0 0 15px;display: block;width: 55%;float: left;line-height: 60px;color: #777777;">
            可参与<font id="grabNum"></font>场会议的抢单
        </div>
        <div style="width: calc(45% - 15px);float: right;">
            <select id="tid"  onchange="loadMeetingGrabList(this.value)">

            </select>
        </div>
        <div id="grabDiv" style="width: 100%;float: left;"></div>
    </div>





    <div id="two" class="ui-body-d ui-content" style="padding: 0;display: none;width: 100%;">

    </div>
</div>
</body>

</html>